<template>
  <div class="dashboard-editor-container">
    <!--    <github-corner class="github-corner"/>-->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="7">
        <el-card>
          <el-divider><font color="#ccc">设备统计</font></el-divider>
        <panel-group @handleSetLineChartData="handleSetLineChartData" :panel-data="numbers"/>
          <el-divider></el-divider>
          <el-divider></el-divider>
          <box-card style="margin-top:80px;margin-bottom: 50px"/>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="17">
        <el-card>
          <el-divider><font color="#ccc">订单统计</font></el-divider>
         <panel-group-order @handleSetLineChartData="handleSetLineChartData" :panel-data="numbers"/>

          <el-divider><el-date-picker
              style="margin-top:-20px"
              v-model="listQuery.time"
              type="daterange"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onChange(0)"
              align="right"
          >
          </el-date-picker> </el-divider>
          <el-card>
          <el-col :xs="24" :sm="24" :lg="7">
            <el-cascader
                v-if="level == 1"
                class="filter-item"
                v-model="selectParent" :options="distributorsList"
                :props="distributorsProps"
                placeholder="所属经销商"
                @change="onChange(1)"
                style="width: 100%" clearable filterable></el-cascader>
            <el-divider></el-divider>
            <el-select v-model="listQuery.station_id" filterable placeholder="请选择电站" class="filter-item" clearable multiple
                       @change="onChange(0)"
            >
              <el-option
                  v-for="item in stationList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              >
              </el-option>
            </el-select>
            <el-divider></el-divider>
            <el-card>
              <p style="padding: 3px">
              <font style="color:#cccc77;font-size: 16px">温馨提示：<br/>
                &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;因老设备的硬件未做电量参数的统计尚无源数据，当前统计的累计电量仅为类型为新设备自
                2025年05月29日之后的订单数据</font>
              </p>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="17">
            <div class="chart-wrapper">
              <bar-chart
                  :bar-line="barLine"
                  :bar-data="barData"
                  :avg-data="avgData"
                  :avg-data1="avgData1"
                  :avg-data2="avgData2"
                  :avg-data3="avgData3"
                  :bar-type="'number'"
              />
            </div>
          </el-col>
          </el-card>
        </el-card>
      </el-col>

    </el-row>
<!--    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
<!--    </el-row>-->





  </div>
</template>

<script>
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
import PanelGroupOrder from './components/PanelGroupOrder'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import PieChart1 from './components/PieChart1'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'
import { scrollNum, getChart, getRadder, getPie, getMonth ,getPass} from '@/api/main'
import {all} from "@/api/distributors";
import {selectStation} from "@/api/station";

const lineData = {
  week: ['上周一', '上周二', '上周三', '上周四', '上周五', '上周六', '上周日'],
  month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
}

const lineChartData = {
  views: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  }
  // messages: {
  //   expectedData: [200, 192, 120, 144, 160, 130, 140],
  //   actualData: [180, 160, 151, 106, 145, 150, 130]
  // },
  // purchases: {
  //   expectedData: [80, 100, 121, 104, 105, 90, 100],
  //   actualData: [120, 90, 100, 138, 142, 130, 130]
  // },
  // shoppings: {
  //   expectedData: [130, 140, 141, 142, 145, 150, 160],
  //   actualData: [120, 82, 91, 154, 162, 140, 130]
  // }
}

export default {
  name: 'DashboardAdmin',
  components: {
    // GithubCorner,
    PanelGroup,
    PanelGroupOrder,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable,
    TodoList,
    BoxCard,
    PieChart1
  },
  data() {
    return {
      distributorsProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      },
      lineChartData: [],
      numbers: {},
      raddarChart: [
        { name: '10-15years old', max: 10000 },
        { name: '20-25years old', max: 10000 },
        { name: '25-30years old', max: 10000 },
        { name: '30-35years old', max: 10000 },
      ],
      radlegend: ['10-15years old', '20-25years old', '25-30years old','30-35years old'],
      radData: [
        {
          value: [5000, 7000, 12000, 11000, 15000],
          name: '幼年'
        },
        {
          value: [4000, 9000, 15000, 15000, 13000],
          name: '青年'
        },
        {
          value: [5500, 11000, 12000, 15000, 12000],
          name: '老年'
        }
      ],
      level:'',
      lineData: lineData.week,
      pieChartData: [],
      pieChart: [],
      barLine:[],
      barData:[],
      passLine:[],
      passData:[],
      avgData:[],
      avgData1:[],
      avgData2:[],
      avgData3:[],
      distributorsList:[],
      options: [{
        value: 'week',
        label: '每周'
      }, {
        value: 'month',
        label: '每月'
      }],
      lineType: 'week',
      selectType: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: '',
      selectParent: '',
      stationList: [],
      listQuery: {
        time: [],
        distributor_id: '',
        station_id:[]
      },
    }
  },
  created() {
    this.level = this.$store.getters.introduction
    this.setLastWeekAsDefault()
    this.getScrollNum()
    this.getMonth()
    this.getSelector()
    this.getStation()
    // this.getPassing(this.value2)
    // this.getPie1()
  },
  methods: {
    getStation() {
      this.listQuery.station_id = []
        if (Array.isArray(this.selectParent)) {
          var distributor_id = this.selectParent[this.selectParent.length - 1];
        } else {
          if (this.selectParent) {
            var distributor_id = this.selectParent
          } else {
            var distributor_id = ''
          }
        }
      selectStation(distributor_id).then(response => {
        this.stationList = response.data
      })
    },
    getSelector() {
      all('all').then(response => {
        this.distributorsList = response.data
      })
    },
    onChange(type){
      if (Array.isArray(this.selectParent)) {
        this.listQuery.distributor_id = this.selectParent[this.selectParent.length - 1];
      } else {
        if (this.selectParent) {
          this.listQuery.distributor_id = this.selectParent
        } else {
          this.listQuery.distributor_id = ''
        }
      }
      this.getScrollNum()
      this.getMonth()
      if(type){
        this.getStation()
      }

    },
    handleSetLineChartData(type) {
      this.selectType = type
      this.lineChartData = lineChartData[type]
    },
    changeLine(val) {
      if (val == 'week') {
        this.lineData = lineData.week
      } else {
        this.lineData = lineData.month
      }

    },
    getScrollNum() {
      scrollNum(this.listQuery).then(response => {
        this.numbers = response.data
      })
    },
    formatDate(date) {
      const year = date.getFullYear();
      // getMonth 返回的是从 0 开始的月份，因此要加 1
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');

      // 根据需要的格式拼接字符串
      return `${year}-${month}-${day}`;
    },
    setLastWeekAsDefault() {
      const end = new Date();
      const start = new Date();
      start.setTime(end.getTime() - 3600 * 1000 * 24 * 3);

      // 直接更新 listQuery.time 属性以设置默认时间范围
      this.listQuery.time = [this.formatDate(start), this.formatDate(end)];
    },
    getMonth() {
      getMonth(this.listQuery).then(response => {
        this.barLine =response.data.line
        this.barData =response.data.data
        this.avgData = response.data.elec
        this.avgData1 = response.data.power_fee
        this.avgData2 = response.data.return_fee
        this.avgData3 = response.data.end_time
      })
    },
    initRadder() {
      getRadder().then(response => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.el-carousel__item .chart-wrapper{
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #d3dce6;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
